<template>
  <div class="card_container">
    <nut-navbar class="navbar" z-index="5" :clickable="false" fixed safe-area-inset-top>
      <template #content>
        <span>我的牌局</span>
      </template>
      <template #left>
        <img src="/imgs/club/arrow_left.png" alt="" @click="router.go(-1)" class="arrow_left" />
      </template>
      <template #right>
        <!-- <span @click="onSubmitCreate" class="save">保存</span> -->
      </template>
    </nut-navbar>
    <nut-tabs @change="tabChange" v-model="state.agentId" title-scroll title-gutter="10" v-if="gameTabList">
      <nut-tab-pane :title="item.name" :pane-key="item.id" v-for="item in gameTabList" :key="item.id">
        <!-- 轮播 -->
        <nut-swiper
            :init-page="0"
            :auto-play="3000"
            pagination-visible
            pagination-color="#426543"
            pagination-unselected-color="#808080"
            style="height: 124px"
            >
            <nut-swiper-item v-for="(item, index) in list" :key="index">
              <img :src="item" alt="" class="imgs" draggable="false" />
            </nut-swiper-item>
        </nut-swiper>
        <GmablingCard />
      </nut-tab-pane>
    </nut-tabs>
    <LevitateBox />
  </div>
</template>

<script lang="ts" setup>
import {  ref } from 'vue';
import GmablingCard from "../components/gamblingCard.vue";
import LevitateBox from '../components/levitateBox.vue';

import {  useRouter } from "vue-router";
const router = useRouter();

const state = ref({
  // 1为推荐
  agentId: 1,
})

const list = ref([
  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
])

const gameTabList = ref([
  {
    id: 1,
    name: "推荐",
  },
  {
    id: 2,
    name: "经典",
  },
  {
    id: 3,
    name: "短牌",
  },
  {
    id: 4,
    name: "短牌",
  },
  {
    id: 5,
    name: "赛事",
  }
]);


const tabChange = (item: any) => {
  console.log('item', item)
}

</script>

<style scoped lang="scss">
.card_container {
  .arrow_left {
    width: 24px;
    height: 24px;
  }
  
  .imgs{
    height: 124px;
    width: 347px;
    
  }
  :deep(.nut-swiper) {
    width: 347px;
    border-radius: 8px;
    margin: 0 auto 10px;
  }

  :deep(.nut-tabs__titles) {
    height: 36px;
  }
}

</style>